<template>
  <div class="vulnerability-container">
    <div class="page-header">
      <div class="header-content">
        <h2> <el-icon class="relation-top-2 mr10"><Document /></el-icon>日志管理</h2>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="scanVulnerability" >
          <el-icon><Search /></el-icon>
          刷新日志
        </el-button>
        <el-button type="primary" @click="addVulnerability" >
          <el-icon><Download /></el-icon>
          导出日志
        </el-button>
        <el-button type="danger" @click="addVulnerability" >
          <el-icon><Delete /></el-icon>
          清理日志
        </el-button>
      </div>
    </div>

    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in dataTypes" :key="item.label">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-label">{{ item.label }}</div>
              <div class="stat-number">{{ item.value }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="content-wrapper">
      <div class="filter-section">
        <el-form :model="filterForm" inline>
          <el-form-item label="详情">
            <el-input
              v-model="filterForm.name"
              placeholder="请输入详情"
              clearable
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="级别">
            <el-select
              v-model="filterForm.severity"
              placeholder="请选择级别"
              clearable
            >
              <el-option label="信息" value="critical" />
              <el-option label="警告" value="high" />
              <el-option label="错误" value="medium" />
              <el-option label="调试" value="low" />
            </el-select>
          </el-form-item>
          <el-form-item label="模块">
            <el-select
              v-model="filterForm.status"
              placeholder="请选择模块"
              clearable
            >
              <el-option label="系统" value="open" />
              <el-option label="用户" value="fixed" />
              <el-option label="安全" value="ignored" />
              <el-option label="战术" value="zs" />
              <el-option label="拓扑" value="tp" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              @change="handleDateRangeChange"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-section">
        <el-table :data="tableData" v-loading="loading" stripe border>
          <el-table-column prop="discoveredTime" label="时间" width="160" />
          <el-table-column prop="severity" label="级别" width="100">
            <template #default="{ row }">
              <el-tag :type="getSeverityTagType(row.severity)">
                {{ getSeverityText(row.severity) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="affected" label="模块" width="180" />
          <el-table-column prop="cve" label="用户" width="150" />
          <el-table-column prop="name" label="操作" width="200" />
          <el-table-column
            prop="description"
            label="详情"
            show-overflow-tooltip
          />
        </el-table>
        <div class="pagination-wrapper">
          <el-pagination
            :hide-on-single-page="false"
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Download, Delete, Search, Document } from "@element-plus/icons-vue";

const router = useRouter();

const dataTypes = [
  { label: "日志总数", value: "12345" },
  { label: "今日新增", value: "954" },
  { label: "错误日志", value: "34" },
  { label: "警告日志", value: "23" },
];

// 响应式数据
const loading = ref(false);
const tableData = ref([]);

// 筛选表单
const filterForm = reactive({
  name: "",
  severity: "",
  status: "",
  dateRange: null,
});

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0,
});

// 模拟数据
const mockData = [
  {
    id: 1,
    name: "SQL注入漏洞",
    cve: "CVE-2024-0001",
    severity: "high",
    affected: "Web应用登录模块",
    status: "open",
    discoveredTime: "2024-01-15 10:30:00",
    description: "登录页面存在SQL注入漏洞，可能导致数据库信息泄露",
  },
  {
    id: 2,
    name: "XSS跨站脚本攻击",
    cve: "CVE-2024-0002",
    severity: "medium",
    affected: "用户评论系统",
    status: "fixed",
    discoveredTime: "2024-01-16 09:15:00",
    description: "用户输入未经过滤，存在XSS攻击风险",
  },
  {
    id: 3,
    name: "权限提升漏洞",
    cve: "CVE-2024-0003",
    severity: "critical",
    affected: "系统管理模块",
    status: "open",
    discoveredTime: "2024-01-17 11:00:00",
    description: "普通用户可通过特定操作获得管理员权限",
  },
];

// 生命周期
onMounted(() => {
  fetchData();
});

// 方法
const fetchData = async () => {
  loading.value = true;
  try {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    tableData.value = mockData;
    pagination.total = mockData.length;
  } catch (error) {
    ElMessage.error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  pagination.page = 1;
  fetchData();
};

const resetFilter = () => {
  filterForm.name = "";
  filterForm.severity = "";
  filterForm.status = "";
  handleSearch();
};

const handleSizeChange = (size) => {
  pagination.pageSize = size;
  fetchData();
};

const handleCurrentChange = (page) => {
  pagination.page = page;
  fetchData();
};

const scanVulnerability = () => {
  router.push("/vulnerability/scan");
};

const addVulnerability = () => {
  ElMessage.info("添加漏洞功能");
};

const viewVulnerability = (row) => {
  ElMessage.info(`查看漏洞详情: ${row.name}`);
};

const fixVulnerability = (row) => {
  ElMessageBox.confirm("确认标记此漏洞为已修复吗？", "修复确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success",
  }).then(() => {
    row.status = "fixed";
    ElMessage.success("已标记为修复");
  });
};

const ignoreVulnerability = (row) => {
  ElMessageBox.confirm("确认忽略此漏洞吗？", "忽略确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    row.status = "ignored";
    ElMessage.success("已忽略此漏洞");
  });
};

const deleteVulnerability = (row) => {
  ElMessageBox.confirm(`确认删除漏洞"${row.name}"吗？`, "删除确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  }).then(() => {
    const index = tableData.value.findIndex((item) => item.id === row.id);
    if (index > -1) {
      tableData.value.splice(index, 1);
      pagination.total--;
      ElMessage.success("删除成功");
    }
  });
};

// 工具函数
const getSeverityTagType = (severity) => {
  const tagMap = {
    critical: "danger",
    high: "danger",
    medium: "warning",
    low: "info",
  };
  return tagMap[severity] || "info";
};

const getSeverityText = (severity) => {
  const textMap = {
    critical: "严重",
    high: "高危",
    medium: "中危",
    low: "低危",
  };
  return textMap[severity] || "未知";
};

const getStatusTagType = (status) => {
  const tagMap = {
    open: "danger",
    fixed: "success",
    ignored: "info",
  };
  return tagMap[status] || "info";
};

const getStatusText = (status) => {
  const textMap = {
    open: "未修复",
    fixed: "已修复",
    ignored: "已忽略",
  };
  return textMap[status] || "未知";
};
</script>

<style lang="scss" scoped>
.vulnerability-container {
  background-color: var(--bg-color);
}

  .header-content {
    h2 {
      margin: 0 0 8px 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }




.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}


</style>
